<template>
	<view class="produce_deta">
		<view class="content">
			<view class="close" @click="$emit('close')">
				<image :src="`${baseImageUrl}/common/close1.png`"></image>
			</view>
			<view class="title">
				<view>生产情况</view>
			</view>
			<view class="cover">
				<!-- <image :src="`${baseImageUrl}/test/avatar.png`"></image> -->
				<image :src="cover"></image>
			</view>
			<view class="list">
				<view class="item">
					<view class="key">农场名称：</view>
					<view class="value">{{name}}</view>
				</view>
				<view class="item">
					<view class="key">农场等级：</view>
					<view class="value">Lv {{industry_level}}</view>
				</view>
				<view class="item">
					<view class="key">耐久度：</view>
					<view class="value progress_view">
						<view class="progress" :style="{width:durability>100?100:durability+'%'}"></view>
						<view class="text">{{durability}}/100</view>
					</view>
					<view class="add" @click="add_all">
						<image src="@/static/images/add/bc1.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="key">产出速率：</view>
					<view class="value success">{{output}}</view>
				</view>
				<view class="item">
					<view class="key">累计产出：</view>
					<view class="value">{{output_total}}</view>
				</view>
				<view class="item">
					<view class="key">收取时间：</view>
					<view class="value">{{receive_date}}</view>
				</view>
			</view>
			<view class="btn_view">
				<!-- <view class="cancel" @click="remove_click">拆除</view> -->
				<view class="cancel" @click="open(3)">拆除</view>
				<view class="confirm" @click="open(1)">升级</view>
				<view class="add" @click="query_supply">补充</view>
				<!-- <view class="add" @click="open(2)">补充</view> -->
			</view>
			<image :src="`${baseImageUrl}/apng/up.png`" class="apng" v-if="apng"></image>
			<image :src="`${baseImageUrl}/apng/remove.png`" class="apng" v-if="remove"></image>
		</view>

		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<Upgrade :id="id" :cover="cover" :field_text="field_text" @close="close" @success="success"
				v-if="popup==1" />
			<ProduceAdd :id="id" :cover="cover" @close="close" @success="success" v-else-if="popup==2" />
			<RemovePopup :id="id" :cover="cover" @close="close" @submit="remove_click" v-else-if="popup==3" />
		</u-popup>

		<u-popup :show="tell_show" bgColor="transparent" mode="center">
			<PopupTell :type="tell_type" :title="tell_title" tell_advert="看广告,增耐久!" :tell_text="tell_text"
				@close="tell_show=false" @submit="submit" />
		</u-popup>
	</view>
</template>

<script>
	import {
		industryInfo,
		industryRemove,
		advertCan,
		industrySupplementAll
	} from '@/request/api.js';
	import PopupTell from '@/components/common/PopupTell.vue';
	import Upgrade from '@/components/home/Upgrade.vue';
	import ProduceAdd from '@/components/home/ProduceAdd.vue';
	import RemovePopup from '@/components/home/RemovePopup.vue';

	export default {
		components: {
			PopupTell,
			Upgrade,
			ProduceAdd,
			RemovePopup
		},
		props: {
			id: {
				type: [Number, String],
				default: ""
			}
		},
		data() {
			return {
				cover: "",
				name: "",
				industry_level: "",
				durability: "",
				output: "",
				output_total: "",
				receive_date: "",

				popup_show: false,
				popup: 1,

				field_text: "",

				apng: false,
				remove: false,

				tell_text: "",
				tell_type: "",
				tell_title: "",
				tell_show: false
			}
		},
		created() {
			this.getDeta();
		},
		methods: {
			async getDeta() {
				let {
					user_industry,
					industry,
					output,
					upgrade_number,
					upgrade_field
				} = await industryInfo({
					industry_id: this.id
				});
				this.cover = user_industry.order.product_cover;
				this.name = user_industry.order.product_name;
				this.industry_level = user_industry.order.industry_level;
				this.durability = user_industry.order.durability;
				this.receive_date = user_industry.receive_date;

				this.output = output;
				this.output_total = user_industry.output_total;

				this.field_text = `${upgrade_number}${upgrade_field.field_name}`;
			},
			open(index) {
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
			},
			success() {
				this.popup_show = false;
				this.apng = true;
				setTimeout(() => {
					this.apng = false;
					this.getDeta();
				}, 2000);
			},
			async query_supply() {
				let env = this.$store.state.env;
				if (env != "android") {
					this.open(2);
					return false;
				}
				let {
					is_can
				} = await advertCan({
					extrainfo: 3
				});
				if (is_can) {
					this.tell_type = `3_${this.id}`;
					this.tell_title = "补充建筑物耐久";
					this.tell_text = "消耗材料补充";
					this.tell_show = true;
					return false;
				}
				this.open(2);
			},
			submit() {
				this.tell_show = false;
				this.open(2);
			},
			async add_all() {
				await industrySupplementAll({
					industry_id: this.id
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.getDeta();
				}, 1000);
			},
			async remove_click() {
				await industryRemove({
					industry_id: this.id
				});
				this.remove = true;
				setTimeout(() => {
					this.remove = false;
					this.$emit('close');
				}, 2100);
			}
		}
	}
</script>

<style scoped lang="scss">
	.produce_deta {
		.content {
			width: 100vw;
			height: 986rpx;
			font-family: LiSu;
			padding: 35rpx 85rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/bg/750_1120.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.apng {
				width: 360rpx;
				height: 360rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 2;
			}

			.close {
				width: 122rpx;
				height: 122rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				transform: translate(20rpx, -45rpx);
				z-index: 2;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					width: 256rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					color: #494338;
					font-size: 42rpx;
					font-weight: 400;
					font-family: LiSu;
					background: url(#{$baseImageUrl}/home/title.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.cover {
				width: 360rpx;
				height: 360rpx;
				background: url(#{$baseImageUrl}/bg/372_372.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 300rpx;
					height: 300rpx;
				}
			}

			.list {
				.item {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.key {
						width: 220rpx;
						text-align: right;
						color: #494338;
						font-size: 42rpx;
						font-weight: 400;
						padding-right: 10rpx;
						box-sizing: border-box;
					}

					.value {
						color: #494338;
						font-size: 42rpx;
						font-weight: 400;
						white-space: pre;

						&.success {
							color: #38880F;
						}

						&.progress_view {
							width: 296rpx;
							height: 25rpx;
							background: #B4A88E;
							box-shadow: 0px 0px 4px 0px rgba(110, 93, 72, 0.67);
							position: relative;

							.text {
								width: 100%;
								height: 25rpx;
								line-height: 25rpx;
								text-align: center;
								color: #494338;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
								box-sizing: border-box;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 2;
							}

							.progress {
								// width: 30%;
								height: 100%;
								background: linear-gradient(90deg, #E68B30, #FAD44C);
							}
						}
					}

					.add {
						margin-left: 10rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}

			.btn_view {
				display: flex;
				justify-content: center;

				view {
					width: 204rpx;
					height: 74rpx;
					line-height: 74rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: 400;
					font-family: SimSun;
					// margin: 0 15rpx;
				}

				.cancel {
					background: url(#{$baseImageUrl}/common/btn2.png) no-repeat;
					background-size: 100% 100%;
				}

				.confirm {
					background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
					background-size: 100% 100%;
				}

				.add {
					background: url(#{$baseImageUrl}/common/btn3.png) no-repeat;
					background-size: 100% 100%;
				}

			}
		}
	}
</style>